<template>
    <div class="hfooter">
        <ul class="hfooter-ul h-row">
            <li class="h-col h-col-8 hclick" v-for="(v,i) in hfooterData" :key="i" :class="{'active':activeId==i}" @click="changeActiveId(i)">
                <router-link :to="{path:v.url}" tag="figure">
                    <!-- <img src="" alt=""> -->
                    <p>{{v.name}}</p>
                </router-link>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    data() {
        return {
            hfooterData: [
                { name: "首页", icon: "iconfont", url: "index111" },
                { name: "首页", icon: "iconfont", url: "index111" },
                { name: "首页", icon: "iconfont", url: "index111" }
            ]
        };
    },
    computed: {
        //底部样式
        activeId() {
            return this.$store.state.common.activeId;
        }
    },
    methods:{
        //修改底部导航栏选中状态
        changeActiveId(i){
            this.$store.dispatch("editcommon",{activeId:i})
        }
    }
};
</script>

<style lang="scss">
.hfooter {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: rem(90);
    background-color: transparent;
    border-top: 1px solid #46aaff;
    .hfooter-ul {
        li {
            figure {
                height: rem(90);
                p {
                    font-size: rem(24);
                }
            }
        }
        .active{
            color: #46aaff;
        }
    }
}
</style>
